<template>
  <div class="chooseRole" :style="backgroundStyle">
    <div class="content">
      <img :src="travelImg" alt="" srcset="" @click="goLogin('travel')">
      <img :src="yzImg" alt="" srcset="" @click="goLogin('yz')">
      <img :src="frameImg" alt="" srcset="" @click="goLogin('frame')">
    </div>
  </div>
</template>

<script>
let drp = window.localStorage.getItem('dpr');
export default {
  name: 'chooseRole',
  data() {
    return {
      bgImg: 'url(' + require("@/images/bg_@" + drp + "x.png") + ')',
      yzImg: require('@/images/yz_@' + drp + 'x.png'),
      frameImg: require('@/images/Frame_@' + drp + 'x.png'),
      travelImg: require('@/images/Travel_@' + drp + 'x.png'),
    }
  },
  created() {
    if(this.$route.query.houseCode) {
      window.localStorage.setItem('houseCode', this.$route.query.houseCode)
    } else {
      window.localStorage.setItem('houseCode', '33090324082713081602')
    }
  },
  computed: {
    backgroundStyle() {
      return {
        backgroundImage: this.bgImg
      }
    }
  },
  methods: {
    goLogin(role) {
      this.$router.push('/login?role=' + role + '&houseCode=' + window.localStorage.getItem('houseCode'));
    }
  },
}
</script>

<style lang="less" scoped>
.chooseRole {
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  .content {
    position: relative;
    margin-top: 241px;
    img {
      width: 280px;
      height: 110px;
      display: block;
      margin: 0 auto;
      margin-bottom: 24px;
      cursor: pointer;
    }
  }
}
</style>